<template>
  <div class="app-container">
    <div style="width: 450px; margin: 20px 0">
    <div style="width: 450px">
      <el-input
        placeholder="请输入内容"
        v-model="input3"
        class="input-with-select"
      >
        <el-button slot="append" icon="el-icon-search"></el-button>
      </el-input>
    </div>

    <el-table
      border
      max-height="580px"
      :data="
        dataList.slice(
          (queryParams.pageNum - 1) * queryParams.pageSize,
          queryParams.pageNum * queryParams.pageSize
        )
      "
    >
      <el-table-column label="" prop="user_id" width="50" />
      <el-table-column label="订单编号" prop="order_number" fit />
      <el-table-column label="订单价格" prop="order_price" width="120" />
      <el-table-column label="是否付款" prop="is_send" width="120" />
      <el-table-column label="是否发货" prop="is_send" width="120" />
      <el-table-column label="下单时间" prop="update_time" width="140" />
      <el-table-column label="操作" prop="name" width="200">
        <el-button type="primary" size="mini" @click="dialogFormVisible = true"
          >修改地址</el-button
        >
        <el-button type="success" size="mini" @click="dialogTableVisible = true"
          >查看物流</el-button
        >
      </el-table-column>
    </el-table>

    <!-- 分页器 -->
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage4"
      :page-sizes="[2, 10, 20, 30]"
      :page-size="10"
      layout="total, sizes, prev, pager, next, jumper"
      :total="dataList.length"
    >
    </el-pagination>

    <!-- 修改地址 -->
    <el-dialog title="修改地址信息" :visible.sync="dialogFormVisible">
      <el-form :model="form">
        <el-form-item label="地址" :label-width="formLabelWidth">
          <div class="block">
            <el-cascader
              :options="options"
              :props="{ checkStrictly: true }"
              clearable
            ></el-cascader>
          </div>
        </el-form-item>

        <el-form-item
          label="详细地址"
          prop="name"
          :label-width="formLabelWidth"
        >
          <el-input v-model="form.name" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogFormVisible = false"
          >确 定</el-button
        >
      </div>
    </el-dialog>
    <!-- 物流进程 -->
    <el-dialog title="物流信息" :visible.sync="dialogTableVisible">
      <div class="block">
        <el-timeline>
          <el-timeline-item
            v-for="(activity, index) in activities"
            :key="index"
            :icon="activity.icon"
            :type="activity.type"
            :color="activity.color"
            :size="activity.size"
            :timestamp="activity.timestamp"
          >
            {{ activity.content }}
          </el-timeline-item>
        </el-timeline>
      </div>
    </el-dialog>
  </div>
  </div>
  
</template>
<script>
import city from "../../utils/city_data2017_element";
export default {
  data() {
    return {
      input3: "",
      currentPage4: 1,
      queryParams: {
        pageNum: 1,
        pageSize: 10,
      },
      // 页面渲染数据
      dataList: [],
      // 物流进程
      activities: [
        {
          content: "已签收,感谢使用顺丰，期待再次为您服务",
          timestamp: "2018-05-10 09:39:00",
        },
        {
          content:
            "[北京市]北京海淀育新小区营业点派件员顺丰速运95338正在为您派件",
          timestamp: "2018-05-10 08:23:00",
        },
        {
          content: "快件到达[北京海淀育新小区营业点",
          timestamp: "2018-05-10 07:32:00",
        },
        {
          content:
            "快件在[北京顺义集散中心]已装车,准备发往[北京海淀育新小区营业点]",
          timestamp: "2018-05-10 02:03:00",
        },
        {
          content: "快件到达[北京顺义集散中心",
          timestamp: "2018-05-09 23:05:00",
        },
        {
          content: "快件在[北京宝胜营业点已装车.准备发往[北京顺义集散中心]",
          timestamp: "2018-05-09 21:21:00",
        },
        {
          content: "顺丰速运已收取快件",
          timestamp: "2018-05-09 13:07:00",
        },
        {
          content: "卖家发货",
          timestamp: "2018-05-09 12:25:03",
        },
        {
          content: "您的订单将由HL A (北京海淀区清河中街店)门店安排发货。",
          timestamp: "2018-05-09 12:22:24",
        },
        {
          content: "物流进程",
          timestamp: "2018-05-08 21:36:04",
        },
      ],
      dialogTableVisible: false,
      dialogFormVisible: false,
      form: {
        name: "",
        region: "",
        date1: "",
        date2: "",
        delivery: false,
        type: [],
        resource: "",
        desc: "",
      },
      formLabelWidth: "120px",
      options: city,
      // options: [
      //   {
      //     value: "beijing",
      //     label: "北京",
      //     children: [
      //       {
      //         value: "shejiyuanze",
      //         label: "东城区",
      //       },
      //       {
      //         value: "shejiyuanze",
      //         label: "西城区",
      //       },
      //       {
      //         value: "shejiyuanze",
      //         label: "丰台区",
      //       },
      //       {
      //         value: "shejiyuanze",
      //         label: "朝阳区",
      //       },
      //       {
      //         value: "shejiyuanze",
      //         label: "石景山区",
      //       },
      //       {
      //         value: "shejiyuanze",
      //         label: "海淀区",
      //       },
      //       {
      //         value: "shejiyuanze",
      //         label: "通州区",
      //       },
      //       {
      //         value: "shejiyuanze",
      //         label: "顺义区",
      //       },
      //       {
      //         value: "shejiyuanze",
      //         label: "大兴区",
      //       },
      //       {
      //         value: "shejiyuanze",
      //         label: "门头沟区",
      //       },
      //       {
      //         value: "shejiyuanze",
      //         label: "房山区",
      //       },
      //       {
      //         value: "shejiyuanze",
      //         label: "昌平区",
      //       },
      //       {
      //         value: "shejiyuanze",
      //         label: "密云区",
      //       },
      //       {
      //         value: "shejiyuanze",
      //         label: "平谷区",
      //       },
      //       {
      //         value: "shejiyuanze",
      //         label: "怀柔区",
      //       },
      //       {
      //         value: "shejiyuanze",
      //         label: "延庆区",
      //       },
      //     ],
      //   },
      //   {
      //     value: "beijing",
      //     label: "北京",
      //     children: [
      //       {
      //         value: "shejiyuanze",
      //         label: "东城区",
      //       },
      //       {
      //         value: "shejiyuanze",
      //         label: "西城区",
      //       },
      //       {
      //         value: "shejiyuanze",
      //         label: "丰台区",
      //       },
      //       {
      //         value: "shejiyuanze",
      //         label: "朝阳区",
      //       },
      //       {
      //         value: "shejiyuanze",
      //         label: "石景山区",
      //       },
      //       {
      //         value: "shejiyuanze",
      //         label: "海淀区",
      //       },
      //       {
      //         value: "shejiyuanze",
      //         label: "通州区",
      //       },
      //       {
      //         value: "shejiyuanze",
      //         label: "顺义区",
      //       },
      //       {
      //         value: "shejiyuanze",
      //         label: "大兴区",
      //       },
      //       {
      //         value: "shejiyuanze",
      //         label: "门头沟区",
      //       },
      //       {
      //         value: "shejiyuanze",
      //         label: "房山区",
      //       },
      //       {
      //         value: "shejiyuanze",
      //         label: "昌平区",
      //       },
      //       {
      //         value: "shejiyuanze",
      //         label: "密云区",
      //       },
      //       {
      //         value: "shejiyuanze",
      //         label: "平谷区",
      //       },
      //       {
      //         value: "shejiyuanze",
      //         label: "怀柔区",
      //       },
      //       {
      //         value: "shejiyuanze",
      //         label: "延庆区",
      //       },
      //     ],
      //   },
      //   {
      //     value: "beijing",
      //     label: "北京",
      //     children: [
      //       {
      //         value: "shejiyuanze",
      //         label: "东城区",
      //       },
      //       {
      //         value: "shejiyuanze",
      //         label: "西城区",
      //       },
      //       {
      //         value: "shejiyuanze",
      //         label: "丰台区",
      //       },
      //       {
      //         value: "shejiyuanze",
      //         label: "朝阳区",
      //       },
      //       {
      //         value: "shejiyuanze",
      //         label: "石景山区",
      //       },
      //       {
      //         value: "shejiyuanze",
      //         label: "海淀区",
      //       },
      //       {
      //         value: "shejiyuanze",
      //         label: "通州区",
      //       },
      //       {
      //         value: "shejiyuanze",
      //         label: "顺义区",
      //       },
      //       {
      //         value: "shejiyuanze",
      //         label: "大兴区",
      //       },
      //       {
      //         value: "shejiyuanze",
      //         label: "门头沟区",
      //       },
      //       {
      //         value: "shejiyuanze",
      //         label: "房山区",
      //       },
      //       {
      //         value: "shejiyuanze",
      //         label: "昌平区",
      //       },
      //       {
      //         value: "shejiyuanze",
      //         label: "密云区",
      //       },
      //       {
      //         value: "shejiyuanze",
      //         label: "平谷区",
      //       },
      //       {
      //         value: "shejiyuanze",
      //         label: "怀柔区",
      //       },
      //       {
      //         value: "shejiyuanze",
      //         label: "延庆区",
      //       },
      //     ],
      //   },
      //   {
      //     value: "beijing",
      //     label: "北京",
      //     children: [
      //       {
      //         value: "shejiyuanze",
      //         label: "东城区",
      //       },
      //       {
      //         value: "shejiyuanze",
      //         label: "西城区",
      //       },
      //       {
      //         value: "shejiyuanze",
      //         label: "丰台区",
      //       },
      //       {
      //         value: "shejiyuanze",
      //         label: "朝阳区",
      //       },
      //       {
      //         value: "shejiyuanze",
      //         label: "石景山区",
      //       },
      //       {
      //         value: "shejiyuanze",
      //         label: "海淀区",
      //       },
      //       {
      //         value: "shejiyuanze",
      //         label: "通州区",
      //       },
      //       {
      //         value: "shejiyuanze",
      //         label: "顺义区",
      //       },
      //       {
      //         value: "shejiyuanze",
      //         label: "大兴区",
      //       },
      //       {
      //         value: "shejiyuanze",
      //         label: "门头沟区",
      //       },
      //       {
      //         value: "shejiyuanze",
      //         label: "房山区",
      //       },
      //       {
      //         value: "shejiyuanze",
      //         label: "昌平区",
      //       },
      //       {
      //         value: "shejiyuanze",
      //         label: "密云区",
      //       },
      //       {
      //         value: "shejiyuanze",
      //         label: "平谷区",
      //       },
      //       {
      //         value: "shejiyuanze",
      //         label: "怀柔区",
      //       },
      //       {
      //         value: "shejiyuanze",
      //         label: "延庆区",
      //       },
      //     ],
      //   },
      //   {
      //     value: "beijing",
      //     label: "北京",
      //     children: [
      //       {
      //         value: "shejiyuanze",
      //         label: "东城区",
      //       },
      //       {
      //         value: "shejiyuanze",
      //         label: "西城区",
      //       },
      //       {
      //         value: "shejiyuanze",
      //         label: "丰台区",
      //       },
      //       {
      //         value: "shejiyuanze",
      //         label: "朝阳区",
      //       },
      //       {
      //         value: "shejiyuanze",
      //         label: "石景山区",
      //       },
      //       {
      //         value: "shejiyuanze",
      //         label: "海淀区",
      //       },
      //       {
      //         value: "shejiyuanze",
      //         label: "通州区",
      //       },
      //       {
      //         value: "shejiyuanze",
      //         label: "顺义区",
      //       },
      //       {
      //         value: "shejiyuanze",
      //         label: "大兴区",
      //       },
      //       {
      //         value: "shejiyuanze",
      //         label: "门头沟区",
      //       },
      //       {
      //         value: "shejiyuanze",
      //         label: "房山区",
      //       },
      //       {
      //         value: "shejiyuanze",
      //         label: "昌平区",
      //       },
      //       {
      //         value: "shejiyuanze",
      //         label: "密云区",
      //       },
      //       {
      //         value: "shejiyuanze",
      //         label: "平谷区",
      //       },
      //       {
      //         value: "shejiyuanze",
      //         label: "怀柔区",
      //       },
      //       {
      //         value: "shejiyuanze",
      //         label: "延庆区",
      //       },
      //     ],
      //   },
      //   {
      //     value: "beijing",
      //     label: "北京",
      //     children: [
      //       {
      //         value: "shejiyuanze",
      //         label: "东城区",
      //       },
      //       {
      //         value: "shejiyuanze",
      //         label: "西城区",
      //       },
      //       {
      //         value: "shejiyuanze",
      //         label: "丰台区",
      //       },
      //       {
      //         value: "shejiyuanze",
      //         label: "朝阳区",
      //       },
      //       {
      //         value: "shejiyuanze",
      //         label: "石景山区",
      //       },
      //       {
      //         value: "shejiyuanze",
      //         label: "海淀区",
      //       },
      //       {
      //         value: "shejiyuanze",
      //         label: "通州区",
      //       },
      //       {
      //         value: "shejiyuanze",
      //         label: "顺义区",
      //       },
      //       {
      //         value: "shejiyuanze",
      //         label: "大兴区",
      //       },
      //       {
      //         value: "shejiyuanze",
      //         label: "门头沟区",
      //       },
      //       {
      //         value: "shejiyuanze",
      //         label: "房山区",
      //       },
      //       {
      //         value: "shejiyuanze",
      //         label: "昌平区",
      //       },
      //       {
      //         value: "shejiyuanze",
      //         label: "密云区",
      //       },
      //       {
      //         value: "shejiyuanze",
      //         label: "平谷区",
      //       },
      //       {
      //         value: "shejiyuanze",
      //         label: "怀柔区",
      //       },
      //       {
      //         value: "shejiyuanze",
      //         label: "延庆区",
      //       },
      //     ],
      //   },
      //   {
      //     value: "beijing",
      //     label: "北京",
      //     children: [
      //       {
      //         value: "shejiyuanze",
      //         label: "东城区",
      //       },
      //       {
      //         value: "shejiyuanze",
      //         label: "西城区",
      //       },
      //       {
      //         value: "shejiyuanze",
      //         label: "丰台区",
      //       },
      //       {
      //         value: "shejiyuanze",
      //         label: "朝阳区",
      //       },
      //       {
      //         value: "shejiyuanze",
      //         label: "石景山区",
      //       },
      //       {
      //         value: "shejiyuanze",
      //         label: "海淀区",
      //       },
      //       {
      //         value: "shejiyuanze",
      //         label: "通州区",
      //       },
      //       {
      //         value: "shejiyuanze",
      //         label: "顺义区",
      //       },
      //       {
      //         value: "shejiyuanze",
      //         label: "大兴区",
      //       },
      //       {
      //         value: "shejiyuanze",
      //         label: "门头沟区",
      //       },
      //       {
      //         value: "shejiyuanze",
      //         label: "房山区",
      //       },
      //       {
      //         value: "shejiyuanze",
      //         label: "昌平区",
      //       },
      //       {
      //         value: "shejiyuanze",
      //         label: "密云区",
      //       },
      //       {
      //         value: "shejiyuanze",
      //         label: "平谷区",
      //       },
      //       {
      //         value: "shejiyuanze",
      //         label: "怀柔区",
      //       },
      //       {
      //         value: "shejiyuanze",
      //         label: "延庆区",
      //       },
      //     ],
      //   },
      // ],
    };
  },
  async created() {
    let obj = {
      pagenum: 1,
      pagesize: 30,
    };
    let res = await this.$http.getListofgoods(obj);
    //   Format("yyyy-MM-dd hh:mm:ss")
    this.dataList = res.data.data.goods;
    // console.log(res.data.data.goods)
  },
  methods: {
    handleSizeChange(size) {
      this.queryParams.pageSize = size;
    },
    handleCurrentChange(page) {
      this.queryParams.pageNum = page;
    },
  },
};
</script>
<style lang="scss" scoped>
.app-container {
  padding: 20px;
  box-shadow: 0 5px 5px 5px #888888;
  border: solid 1px #888888;
}
</style>